<template>
	<view class="content">
		<u--image :showLoading="true" :src="src" width="750rpx" height="600rpx" @click="click"></u--image>
		<u-gap height="20rpx" bgColor="#f5f5f5"></u-gap>
		<view class="ui_btns">
			<view class="item left" :class="index==0?'s':''" @click="select(0)">销售联络方式</view>
			<view class="item" :class="index==1?'s':''" @click="select(1)">实体店购买</view>
			<view class="item right" :class="index==2?'s':''" @click="select(2)">网店购物</view>
		</view>
		<block v-if="index==0">
			<view class="info">
				<text class="left">刘先生</text>
				<text class="right">刘先生</text>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'https://img2.baidu.com/it/u=2112311137,2912593221&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
				index:0
			}
		},
		methods: {
			select(index){
				this.show = false
				this.index = index
			},
		}
	}
</script>

<style lang="less">
	.content {
		width: 750rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.ui_btns{
			margin-top: 40rpx;
			width: 690rpx;
			display: flex;
			flex-wrap: wrap;
			.item{
				flex: 1;
				line-height: 50rpx;
				text-align: center;
				color: #409a67;
				font-size: 26rpx;
				border: 1px solid #409a67;
				margin-right: -1px;
			}
			.left{
				border-top-left-radius: 10rpx;
				border-bottom-left-radius: 10rpx;
			}
			.right{
				border-top-right-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
			}
			.s{
				color: #fff;
				background-color: #409a67;
			}
		}
		.info{
			width: 690rpx;
			display: flex;
			flex-wrap: wrap;
			font-size: 28rpx;
			height: 80rpx;
			align-items: center;
			.left{
				flex: 1;
			}
			.right{
				color: rgb(80, 145, 195);
			}
		}
	}
</style>
